<template>
  <div class="main" ref="mainRef">
    <div
      v-show="!imgBig"
      class="map_body"
      ref="mapbody"
      :class="{ img_big: imgBig }"
    >
      <img
        src="@/assets/image/data_img_small.jpg"
        ref="imgRef"
        @click="imgClick"
        @load="imageLoaded"
      />
    </div>
    <div
      v-show="imgBig"
      class="map_body"
      ref="mapbody2"
      :class="{ img_big: imgBig }"
    >
      <img src="@/assets/image/data_img.jpg" ref="imgRef2" @click="imgClick" />
      <!-- 区域点位 -->
      <aTree
        :documentHeight="documentHeight"
        :listData="list"
        @imgClick="imgEmitClick"
      />
      <bTree
        :documentHeight="documentHeight"
        :listData="list"
        @imgClick="imgEmitClick"
      />
      <cTree
        :documentHeight="documentHeight"
        :listData="list"
        @imgClick="imgEmitClick"
      />
      <dTree
        :documentHeight="documentHeight"
        :listData="list"
        @imgClick="imgEmitClick"
      />
      <eTree
        :documentHeight="documentHeight"
        :listData="list"
        @imgClick="imgEmitClick"
      />
      <fTree
        :documentHeight="documentHeight"
        :listData="list"
        @imgClick="imgEmitClick"
      />
      <div
        v-if="imgBig && detailPol.x && detailPol.y"
        class="detail_body"
        :style="{ left: detailPol.x + 'px', top: detailPol.y + 'px' }"
      >
        <div class="name"><i class="icon"></i>{{ detailPol.name }}</div>
        <div
          class="btn_body"
          @click="btnClick"
          :class="detailPol.status == 1 ? 'btn_over' : ''"
        >
          {{ detailPol.status == 1 ? "去认捐" : "已认捐" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import aTree from "./children/aTree.vue";
import bTree from "./children/bTree.vue";
import cTree from "./children/cTree.vue";
import dTree from "./children/dTree.vue";
import eTree from "./children/eTree.vue";
import fTree from "./children/fTree.vue";
import { getList } from "@/api/inverter";
export default {
  components: { aTree, bTree, cTree, dTree, eTree, fTree },
  data() {
    return {
      activeIndex: 0,
      curPage: {},
      navList: [],
      imgBig: false,
      documentWidth: 0, // 页面宽度
      documentHeight: 0, // 页面高度
      smImgWidth: 0, // 小图宽度
      smImgHeith: 0, // 小图高度
      smMaxScrollX: 0, // 小图最大x位移
      bgMaxScrollX: 0, // 大图最大x位移
      bgMaxScrollY: 0, // 大图最大y位移
      scaleNum: 4, // 放大倍数
      list: [],
      detailPol: {},
    };
  },
  watch: {
    $route: {
      handler(val) {},
      deep: true,
    },
  },
  created() {
    this.init();
    this.getList();
  },
  methods: {
    // 初始化页面各项数据
    init() {
      // 获取页面内容大小
      this.documentWidth = document.documentElement.scrollWidth;
      this.documentHeight = document.documentElement.scrollHeight;
      console.log(
        `页面内容宽度: ${this.documentWidth}px, 页面内容高度: ${this.documentHeight}px`
      );
    },
    // 图片加载完成
    imageLoaded() {
      this.smImgWidth = this.$refs.imgRef.width;
      this.smImgHeith = this.$refs.imgRef.height;
      console.log(
        `小图片宽度: ${this.smImgWidth}px, 小图片高度: ${this.smImgHeith}px`
      );
      this.smMaxScrollX = this.smImgWidth - this.documentWidth;
      console.log("小图最大x移动位置", this.smMaxScrollX);
      this.bgMaxScrollX = this.smImgWidth * this.scaleNum - this.documentWidth;
      console.log("大图最大x移动位置", this.bgMaxScrollX);
      this.bgMaxScrollY = this.smImgHeith * this.scaleNum - this.documentHeight;
      console.log("大图最大y移动位置", this.bgMaxScrollY);
      // 初始化小图居中
      const centerX = Math.round((this.smImgWidth - this.documentWidth) / 2);
      this.$refs.mainRef.scrollTo(centerX, 0);
      console.log("初始化移动位置", centerX);
      // 计算大图盒子和大图尺寸
      this.$refs.imgRef2.style.width = this.smImgWidth * this.scaleNum + "px";
      this.$refs.imgRef2.style.height = this.smImgHeith * this.scaleNum + "px";
      this.$refs.mapbody2.style.width = this.smImgWidth * this.scaleNum + "px";
      this.$refs.mapbody2.style.height =
        this.documentHeight * this.scaleNum + "px";
    },
    imgClick(e) {
      // 点击相对于页面位置
      const clientX = e.clientX;
      const clientY = e.clientY;
      // 点击时scroll位置
      const scrollX = this.$refs.mainRef.scrollLeft;
      const scrollY = this.$refs.mainRef.scrollTop;
      // 点击相对于图片的位置
      const pointX = scrollX + clientX;
      const pointY = scrollY + clientY;
      this.imgBig = !this.imgBig;
      this.detailPol.x = 0;
      this.detailPol.y = 0;
      if (this.imgBig) {
        // 小图变大图逻辑
        const bgPointX = pointX * this.scaleNum;
        const bgPointY = pointY * this.scaleNum;
        let bgScrollX = 0;
        let bgScrollY = 0;
        // 计算放大后的x位移
        if (bgPointX <= Math.round(this.documentWidth / 2)) {
          bgScrollX = 0;
        } else if (
          bgPointX - Math.round(this.documentWidth / 2) >
          this.bgMaxScrollX
        ) {
          bgScrollX = this.bgMaxScrollX;
        } else {
          bgScrollX = bgPointX - Math.round(this.documentWidth / 2);
        }
        // 计算放大后的y位移
        if (bgPointY <= Math.round(this.documentHeight / 2)) {
          bgScrollY = 0;
        } else if (
          bgPointY - Math.round(this.documentHeight / 2) >
          this.bgMaxScrollY
        ) {
          bgScrollY = this.bgMaxScrollY;
        } else {
          bgScrollY = bgPointY - Math.round(this.documentHeight / 2);
        }
        this.$nextTick(() => {
          this.$refs.mainRef.scrollTo(bgScrollX, bgScrollY);
        });
      } else {
        // 大图变小图逻辑  小图100vh  不用计算y位移
        const smPointX = Math.round(pointX / this.scaleNum);
        let smScrollX = 0;
        // 计算缩小后的x位移
        if (smPointX <= Math.round(this.documentWidth / 2)) {
          smScrollX = 0;
        } else if (
          smPointX - Math.round(this.documentWidth / 2) >
          this.smMaxScrollX
        ) {
          smScrollX = this.smMaxScrollX;
        } else {
          smScrollX = smPointX - Math.round(this.documentWidth / 2);
        }
        this.$nextTick(() => {
          this.$refs.mainRef.scrollTo(smScrollX, 0);
        });
      }
    },
    getList() {
      getList().then((res) => {
        this.list = res.rows;
      });
    },
    imgEmitClick(item) {
      console.log("点击了图片:", item);
      this.detailPol = JSON.parse(JSON.stringify(item));
    },
    btnClick() {
      if (this.detailPol.status != 1) return;
      this.$router.push({ path: "/donate", query: { id: this.detailPol.id } });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  // width: 500px;
  width: 100vw;
  height: 100vh;
  overflow: auto auto;
  // user-select: none;
  .img_big {
    // transform: scale(4);
    transform-origin: 0px 0px;
  }
  .map_body {
    height: 100vh;
    position: relative;
    will-change: transform;
    // width: fit-content;
    & > img {
      // position: absolute;
      // top: 0;
      // left: 0;
      width: auto;
      height: 100vh;
      display: block;
    }
  }

  .content {
    width: 10px;
    height: 10px;
    background: #000;
    position: absolute;
    top: 50px;
    left: 105px;
  }
}
.detail_body {
  position: absolute;
  top: 10px;
  left: 10px;
  opacity: 1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 1);
  overflow: hidden;
  padding: 10px;

  .name {
    left: 18px;
    top: 0px;
    opacity: 1;
    display: flex;
    align-items: center;

    /** 文本1 */
    font-size: 15px;
    font-weight: 500;
    line-height: 17px;
    color: rgba(32, 32, 32, 1);
    .icon {
      display: block;
      width: 5px;
      height: 5px;
      background: rgba(51, 214, 76, 1);
      border-radius: 50%;
      margin-right: 4px;
    }
  }
  .btn_body {
    width: fit-content;
    margin-top: 8px;
    background: rgba(187, 187, 187, 1);
    display: flex;
    padding: 4px;
    border-radius: 5px;
    /** 文本1 */
    font-size: 13px;
    font-weight: 400;
    line-height: 15px;
    color: rgba(255, 255, 255, 1);
  }
  .btn_over {
    background: rgba(255, 73, 48, 1);
  }
}
</style>
